<template>
  <div class="app-container">
    <el-form label-width="90px">
      <el-form-item label="请选择考试" prop="examId">
        <div class="nav">
          <el-select
            v-model="examId"
            filterable
            placeholder="请选择考试"
            @change="getSessionExam"
          >
            <el-option
              v-for="item in examListData"
              :key="item.value"
              :label="item.name"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </div>
      </el-form-item>

      <el-form-item label="请选择场次" prop="sessionId">
        <div class="nav">
          <div
            v-for="(item, index) in grouData"
            :key="index"
            :class="sessionIndex == index ? 'contentchange' : 'content'"
            @click="selectSession(item.id, index)"
          >
            {{ item.name }}
          </div>
        </div>
      </el-form-item>

      <el-form-item label="请选择分类">
        <div class="nav">
          <div
            v-for="(item, index) in typeList"
            :key="index"
            :class="activeIndex == index ? 'contentchange' : 'content'"
            @click="selectType(item, index)"
          >
            {{ item }}
          </div>
        </div>
      </el-form-item>
    </el-form>

    <el-table
      v-loading="loading"
      :data="allExamDataList"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55" align="center" />
      <el-table-column label="小题名称" align="center" prop="context" />
      <el-table-column label="选择人数" align="center" prop="analysisMap">
        <template slot-scope="scope">
          {{ scope.row.analysisMap }}
        </template>
      </el-table-column>
      <el-table-column label="正确率" align="center" prop="correctRate" />

      <el-table-column
        label="操作"
        align="center"
        class-name="small-padding fixed-width"
      >
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            icon="el-icon-download"
            @click="exportExam(scope.row)"
            >导出</el-button
          >
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import { downLoadZip } from '@/utils/zipdownload'
import { exportExam, getExamAnalysis } from '../../../../api/exam/examinee'
import { listExam, getExam } from '@/api/exam/set'

export default {
  data() {
    return {
      examId: '',
      sessionId: '',
      examListData: [],
      grouData: [],
      allExamDataList: [], // 列表所有数据
      loading: false,
      typeList: [],

      dataList: [],
      activeIndex: 0,
      sessionIndex: 0,
    }
  },
  mounted() {
    this.getListExam()
  },
  methods: {
    // 获取考试
    getListExam() {
      let that = this
      listExam().then((res) => {
        that.examListData = res.rows
        that.examId = res.rows[0].id
        that.getSessionExam(res.rows[0].id)
      })
    },

    // 获取场次
    getSessionExam(id) {
      this.loading = true
      getExam(id).then((res) => {
        this.grouData = res.data.sessionList
        this.selectSession(res.data.sessionList[0].id,0)
      })
    },

    // 获取试题分析数据
    selectSession(id, index) {
      this.sessionIndex = index
      getExamAnalysis(id).then((res) => {
        this.dataList = res
        let allArr = []
        let type = ['全部']
        res.forEach((ele) => {
          allArr = allArr.concat(ele.analysisEntities)
          type.push(ele.name)
        })
        this.typeList = type
        this.allExamDataList = allArr
        this.loading = false
      })
    },

    selectType(type, index) {
      this.activeIndex = index
      let arr = []
      this.dataList.forEach((ele) => {
        if (type == ele.name) {
          this.allExamDataList = ele.analysisEntities
        } else if (type == '全部') {
          this.dataList.forEach((ele) => {
            arr = arr.concat(ele.analysisEntities)
          })
          this.allExamDataList = arr
        }
      })
    },

    handleSelectionChange() {},

    exportExam() {
      downLoadZip(
        `/exam/session/exportAnalysis/4e0ee1d10c80473aa89aeb9223a50c8a`,
        '测试',
        'xlsx'
      )
    },
  },
}
</script>

<style scoped>
.nav {
  display: flex;
  flex-wrap: wrap;
}
.content,
.contentchange {
  display: flex;
  border-radius: 10px;
  margin-bottom: 10px;
  padding: 8px 15px;
}
.contentchange {
  margin-right: 10px;
  background: #409eff;
  color: #f1f1f1;
}
.content:hover {
  background: #f1f1f1;
}
</style>